<template>
  <div class="container">
    <img src="http://file.rzkeji.com/web/loveciy/img/customer/title.jpg" class="title"/>
    <div class="header">
      <img src="http://file.rzkeji.com/web/loveciy/img/customer/yuan2.png" class="yuan2"/>
      <img :src="photo_url" class="headerImg"/>
      <img src="http://file.rzkeji.com/web/loveciy/img/customer/yuan1.png" class="yuan1"/>
      <img src="http://file.rzkeji.com/web/loveciy/img/customer/yuan3.png" class="yuan3"/>
      <img src="http://file.rzkeji.com/web/loveciy/img/customer/yuan4.jpg" class="yuan4"/>
    </div>
    <div class="introduce">
      <span>{{nickName}}</span>
      <span>{{desc}}</span>
      <div class="contact">
        <img src="http://file.rzkeji.com/web/loveciy/img/customer/wechat.png" class="wechat" @click="qrcodeShow"/>
        <img src="http://file.rzkeji.com/web/loveciy/img/customer/tel.png" class="tel" @click="tel"/>
      </div>
    </div>
    <img src="http://file.rzkeji.com/web/loveciy/img/customer/time.jpg" class="time" mode="aspectFit"/>
    <img src="http://file.rzkeji.com/web/loveciy/img/customer/menu.jpg" class="menu" mode="aspectFit"/>
    <img src="http://file.rzkeji.com/web/loveciy/img/customer/guan.png" class="guan" mode="aspectFit"/>
    <div class="designDetails" @click="copy">
      <div class="password">{{tao_key}}</div>
      <div class="official">》请复制淘口令《</div>
    </div>
    <img src="http://file.rzkeji.com/web/loveciy/img/customer/design.jpg" class="design"/>
    <img :src="value.img_url" @click="godetails(value.link_url)" class="go" v-for="value in banner_list"/>
    <img src="http://file.rzkeji.com/web/loveciy/img/footer.jpg" class="footer" mode="aspectFill"/>
    <footer1></footer1>


    <div class="popup" v-if="mask">
        <img :src="qrcode" class="qrcode" @longpress="aa"/>
        <img src="http://file.rzkeji.com/web/loveciy/img/close.png" class="close" @click="close"/>
    </div>
  </div>
</template>
<script>

import footer1 from '@/components/footer'
export default {
  data () {
    return {
      photo_url:"",
      phone:"",
      mask:false,
      tao_key:"",
      banner_list:[],
      qrcode:"",
      nickName:"",
      desc:""
    }
  },
  components:{
    footer1
  },
  onLoad () {
    var _this=this;
    _this.$request.getData('https://zlz.loveciy.net/api/other/get-custominfo',"").then(res =>{
      var res=res.data.data;
      _this.banner_list=res.banner_list;
      [_this.qrcode,_this.phone,_this.photo_url,_this.tao_key,_this.nickName,_this.desc]=[res.qrcode_img_url,res.phone,res.photo_url,res.tao_key,res.nickname,res.desc]
    })
  },
  methods:{
    aa(){
      var _this=this;
      wx.getSetting({
        success(res) {
          if (!res.authSetting['scope.writePhotosAlbum']) {
            wx.authorize({
                scope: 'scope.writePhotosAlbum',
                success() {
                  console.log('授权成功过')
                }
            })
          }else{
              wx.showLoading({
                  title:'分享图片正在合成...'
              }),
            wx.getImageInfo({
              src:_this.qrcode,
              success(res){
                wx.saveImageToPhotosAlbum({
                    filePath:res.path,
                    success(res){
                        wx.hideLoading()
                      if(res.errMsg=='saveImageToPhotosAlbum:ok')
                      {
                        _this.$currency.showToast('保存成功','success',2000)
                      }
                        // if(res.errMsg.indexOf('ok')!=-1){
                        //   _this.$currency.showToast('保存成功','none',"")
                        // }
                    },
                    fail(e){
                        wx.hideLoading()
                    }
                })
              }
            })
          }
        }
      })
    },
    qrcodeShow(){
      this.mask=true;
    },
    close(){
      this.mask=false;
    },
    godetails(src){
      this.$currency.goDetails(src)
    },
    tel(){
      var _this=this;
      wx.makePhoneCall({
        phoneNumber: _this.phone //仅为示例，并非真实的电话号码
      })
    },
    copy(){    //点击复制文本到剪切板
      var _this=this;
      wx.setClipboardData({
      data: _this.tao_key,
      success: function(res) {
        wx.getClipboardData({
          success: function(res) {
            console.log(res.data) // data
          }
        })
      }
      })
    }
  },
  onShareAppMessage: function (res) {   //分享
    this.$currency.share(res,'客服页面分享','/pages/customer/main')
  }
}
</script>

<style scoped>
.container{width: 100%;padding-bottom:55px;}
.title{width: 100%;height: 75.5px;}
.headerImg{width: 150px;height: 150px;border-radius: 150px;margin-top: -75px;margin-left: -75px;z-index: 99}
.introduce{width: 100%;}
.introduce span:nth-of-type(1){width: 100%;height: 30px;line-height: 30px;display: block;font-size: 16px;text-align: center;}
.introduce span:nth-of-type(2){width: 100%;line-height: 20px;display: block;font-size: 13px;text-align: center;}
.guan{width: 100%;height:62.2px; }
.header{width: 100%;height: 250px;background: #fff;position: relative;}
.header img{display: block;position: absolute;left: 50%;top: 50%;}
.yuan2{width: 150px;height: 150px;margin-top: -75px;margin-left: -75px;z-index: 98}
.yuan3{width: 180px;height: 180px;margin-top: -90px;margin-left: -90px;z-index: 97}
.yuan1{width: 220px;height: 220px;margin-top: -110px;margin-left: -110px;z-index: 96}
.header img.yuan4{width: 100%;height: 100%;left:0;top:0;z-index:95}
.contact{width: 375px;margin-top:10px;}
.wechat{width: 120px;height: 38.88px;margin-left: 122rpx;}
.tel{width: 120px;height: 38.88px;margin-left: 15px;}
.time{width: 375px;height: 90px;}
.menu{width:375px;height:114px; }
.design,.go{width: 375px;height: 166px;margin-top: 20px;}
.go{margin-top: 10px;}
.designDetails{width: 100%;margin-top: 22px;}
.designDetails div{height: 30px;line-height: 30px;text-align: center;margin:0 auto;color: #666666; }
.password{border: 0.1px solid #cccccc;width:250px;margin-left: 62px;border-radius:10px; }
.official{margin-top: 5px;font-size: 14px;margin-top: 5px;}
.footer{width: 100%;height: 36px;display: block}
.popup{position: fixed;z-index: 99;width: 100%;height: 100%;background: rgba(0,0,0,0.4);left:0;top: 0;}
.qrcode{width: 300px;height: 410px;margin: 50px auto;border-radius: 10px;padding: 10px;margin-bottom: 5px;display: block;z-index: 100}
.close{width: 30px;height: 30px;display: block;margin:15px auto;}
</style>
